<template>
  <view class="salaryAnalysisContainer">
    <view class="textContent">
      <view class="salary">
        <view class="includeCity">
          <view class="title pl">月平均薪酬变化</view>
          <view class="citySelected" @click="chooseCity">{{ currentRegion.label || "选择城市" }}<img :src="srcSalaryInfo" />
          </view>
        </view>
        <view class="salaryDataShow">
          <view class="middle">月薪中位数
            <view class="blueMoney">￥{{ salaryRegionData.fiftyPercentile || "-" }}</view>
          </view>
          <view class="middle line">|</view>
          <view class="middle">环比上月
            <view class="blueMoney">{{
              PositiveNegative(salaryRegionData.ratio) || "-"
            }}</view>
          </view>
        </view>
        <!-- 工作年限薪酬分布 -->
        <chart-month v-if="salaryRegionChartFlag" :salaryRegionChart="salaryRegionChart"></chart-month>
        <view class="title bannerNextTitle">工作年限薪酬分布</view>
        <chart-year v-if="salaryWorkYearChartFlag" :salaryWorkYearChart="salaryWorkYearChart"></chart-year>
        <view class="divideLine"></view>
        <view class="title">不同学历薪酬分布</view>
        <chart-education v-if="salaryEducationChartFlag" :salaryEducationChart="salaryEducationChart"></chart-education>
        <view class="bottom-block"></view>
      </view>
    </view>
    <regionSelector v-if="showRegionSelect" :showRegionSelect.sync="showRegionSelect" @regionChange="regionChange" />
  </view>
</template>
<script>
import { getLayerDetailsData } from "@/api/modules/career";
import chartMonth from "./charts/chartMonth";
import chartYear from "./charts/chartYear";
import chartEducation from "./charts/chartEducation";
import regionSelector from "@/pagesSub/careerNew/positionDictionary/components/regionSelector";
export default {
  name: "salaryAnalysis",
  components: {
    chartMonth,
    chartYear,
    chartEducation,
    regionSelector,
  },
  props: {
    positionId: {
      type: String,
      default: "",
    },
    //当前区域地址如果你要问我为什么不在这个组件里也写一份那是因为存在要传给父组件又有父组件传进来的情况 所以统一放在父组件里
    currentRegion: {
      type: Object,
      default: () => {},
    },
    title: {
      type: String,
      default: "",
    },
    positionName: {
      type: String,
      default: "该职位",
    },
    personId: {
      type: String,
      default: "",
    },
    showFilterBox: {
      type: Boolean,
      default: false,
    },
    hideCharts: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      salaryRegionChartFlag: false,
      salaryWorkYearChartFlag: false,
      salaryEducationChartFlag: false,
      requestSent: false,
      // hideCharts: false,
      showRegionSelect: false,
      salaryRegionData: {},
      salaryRegionChart: {},
      salaryWorkYearChart: {},
      salaryEducationChart: {},
      showRegion: false,
      srcSalaryInfo:
        this.$imgBaseSelf +
        "career/positionDictionary/job_detail_salary_changed_triangle.png",
    };
  },
  watch: {
    positionId: {
      //在父组件中positionId要最后赋值！要不然会出现缺参数
      handler(newValue, oldValue) {
        if (newValue && this.currentRegion.value) {
          this.getThreeChartsData();
        }
      },
      immediate: true,
    },
    //有弹窗的时候要隐藏，因为canvas不受z-index影响会覆盖其他元素
    showRegionSelect: {
      handler(newValue, oldValue) {
        if (newValue) {
          setTimeout(() => {
            // this.hideCharts = newValue;
            this.$emit("update:hideCharts", newValue);
          }, 300);
        } else {
          // this.hideCharts = newValue;
          this.$emit("update:hideCharts", newValue);
        }
      },
      immediate: true,
    },
    showFilterBox: {
      handler(newValue, oldValue) {
        if (newValue) {
          setTimeout(() => {
            // this.hideCharts = newValue;
            this.$emit("update:hideCharts", newValue);
          }, 300);
        } else {
          // this.hideCharts = newValue;
          this.$emit("update:hideCharts", newValue);
        }
      },
      immediate: true,
    },
    currentRegion: {
      handler(newValue, oldValue) {
        if (newValue.value && this.positionId) {
          this.getThreeChartsData();
        }
      },
      immediate: true,
      deep: true,
    },
  },
  created() {
    // this.reqGetSalaryRegionNew();
    // this.getThreeChartsData();
  },
  onLoad() {},
  onReady() {
    // 防止某些机型上无法加载图表，需要再触发一次
    // this.regionChange({
    //   label: "全国",
    //   value: "100000",
    // });
  },
  methods: {
    getThreeChartsData() {
      //防止多次请求影响性能
      // if (this.requestSent) {
      //   uni,
      //     uni.showToast({
      //       title: "进入了但是被return了",
      //       duration: 2000,
      //     });
      //   console.log("进入了但是被return了");
      //   return;
      // }
      this.requestSent = true;
      uni.showLoading({
        title: "加载中",
        mask: true,
      });
      const params = {
        id: this.positionId,
        layerIds: "41",
        // layerIds: this.layerId,
        regionIds: this.currentRegion.value || "",
      };
      getLayerDetailsData(params)
        .then((res) => {
          if (res.code == 200) {
            // console.log("res", res);
            this.requestSent = false;
            let dataList = res.data[0].children[0].children;
            // console.log("dataList", dataList);
            this.salaryRegionData = dataList[0].data;
            this.salaryRegionChartFormat(dataList[0].data.list);
            this.salaryWorkYearEducationChartFormat(
              dataList[1].data,
              "expCodeStr"
            );
            this.salaryWorkYearEducationChartFormat(
              dataList[2].data,
              "eduName"
            );
          } else {
            console.log("请求失败");
          }
        })
        .finally(() => {
          this.requestSent = false;
          uni.hideLoading();
        });
    },
    salaryWorkYearEducationChartFormat(list, yName) {
      let result = {
        dataX: [],
        dataY: [],
      };
      if (!list || !(list instanceof Array)) {
        return;
      }
      list.forEach((lis) => {
        result.dataX.push(lis[yName]);
        result.dataY.push(Math.floor(lis.salaryNum));
      });
      if (yName == "expCodeStr") {
        this.salaryWorkYearChart = result;
        this.salaryWorkYearChartFlag = true;
      } else {
        this.salaryEducationChart = result;
        this.salaryEducationChartFlag = true;
      }
    },
    salaryRegionChartFormat(list) {
      let result = {
        dataX: [],
        dataY: [],
      };
      if (!list || !(list instanceof Array)) {
        return;
      }
      // console.log("salaryRegionChartFormat list", list);
      list.forEach((lis) => {
        result.dataX.push(lis.month + "\n" + lis.year);
        result.dataY.push(Math.floor(lis.salaryNum));
      });
      this.salaryRegionChart = result;
      this.salaryRegionChartFlag = true;
    },
    chooseCity() {
      this.showRegionSelect = true;
      setTimeout(() => {
        // this.hideCharts = true;
        this.$emit("update:hideCharts", true);
      }, 300);
    },
    regionChange(region) {
      // this.hideCharts = false;
      this.$emit("update:hideCharts", false);
      this.showRegionSelect = false;
      console.log("regionChange", region);

      this.$emit("regionChange", region);
    },
    PositiveNegative(str) {
      if (str && str != "") {
        if (str[0] != "-") {
          return "+" + str;
        }
      }
      return str;
    },
  },
};
</script>
<style lang="scss" scoped>
@font-face {
  font-family: "D-DIN-PRO-700-Bold";
  /*定义字体名称*/
  src: url("https://img3.job1001.com/ypMp/elan/images/career/positionDictionary/D-DIN-PRO-700-Bold.ttf");
}
.bannerNextTitle {
  margin-top: 24rpx;
}
.salaryAnalysisContainer {
  margin: 0 0 0 0;
  padding: 34rpx 0rpx;
  background: #ffffff;
  border-radius: 24rpx;

  .textTitle {
    display: flex;
    align-items: center;
    font-size: 32rpx;
    font-family: PingFang-SC-Heavy, PingFang-SC;
    font-weight: 800;
    color: #222222;
    line-height: 44rpx;
    padding: 0 34rpx;

    .titleFlag {
      width: 8rpx;
      height: 36rpx;
      border-radius: 64rpx;
      background-color: #f75a3e;
      margin-right: 16rpx;
    }
  }

  .textContent {
    font-size: 28rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #555555;
    line-height: 48rpx;
    white-space: pre-wrap;
    overflow: hidden;

    // margin-top: 22rpx;
    .salary {
      position: relative;
      margin-top: 10rpx;
      padding-bottom: 60rpx;
      .includeCity {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0rpx 34rpx;

        .pl {
          padding: 0 0;
        }
      }

      .title {
        font-size: 32rpx;
        font-family: PingFang-SC-Heavy, PingFang-SC;
        font-weight: 800;
        color: #333333;
        padding: 0 34rpx;
      }

      .divideLine {
        width: 622rpx;
        margin: 0 auto;
        height: 2rpx;
        border: 2rpx solid #f4f4f4;
        margin-bottom: 42rpx;
      }
      .bottom-block {
        width: 100%;
        height: 160rpx;
      }

      .salaryDataShow {
        display: flex;
        justify-content: center;
        align-items: center;
        color: #999999;
        font-size: 26rpx;
        font-weight: 400;
        margin-top: 34rpx;
        padding: 0 44rpx;

        .middle {
          display: flex;
          flex-direction: column;
          align-items: center;
          margin: 0 30rpx;

          .blueMoney {
            color: #066bff;
            font-size: 36rpx;
            font-weight: bold;
          }
        }

        .line {
          font-size: 40rpx;
          line-height: 40rpx;
          color: #e5e5e5;
        }
      }
    }
  }
}

.citySelected {
  display: flex;
  align-items: center;
  // padding: 0 44rpx;
  font-size: 24rpx;
  color: #888888;
  background: #f6f6f6;
  padding: 16rpx;
  border-radius: 12rpx;
  display: flex;
  line-height: 36rpx;

  img {
    margin-left: 8rpx;
    width: 14rpx;
    height: 14rpx;
  }
}

.reChoose {
  top: 0;
  right: 32rpx;
  position: absolute;
  display: flex;
  align-items: center;
  font-size: 24rpx;
  color: #888888;
  padding-bottom: 20rpx;
}

.echarts-wrap {
  width: 100%;
  margin-top: 12rpx;
}

.emptyLoading {
  height: 450rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  position: relative;
}
</style>
